<!-- experiment-frontend-src-views-Student-ScoreHistory.vue -->
<template>
  <div>
    <h2>历史成绩</h2>
    <el-table :data="filteredScores" border style="width: 100%">
      <el-table-column prop="experimentName" label="实验名称" />
      <el-table-column prop="score" label="分数" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="submitTime" label="提交时间" width="180" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@store/userStore.js'

// 测试数据
const allScores = [
  { id: 1, student: '张三', class: '计科1班', experimentName: '网络拓扑实验一', score: 85, status: '已完成', submitTime: '2023-08-01 14:30' },
  { id: 2, student: '张三', class: '计科1班', experimentName: '网络拓扑实验一', score: 92, status: '已完成', submitTime: '2023-08-02 09:15' },
  { id: 3, student: '张三', class: '计科1班', experimentName: '网络拓扑实验一', score: 78, status: '待批改', submitTime: '2023-08-03 16:45' }
]

const userStore = useUserStore()

// 根据角色过滤数据
const filteredScores = computed(() => {
  return allScores;
})

const statusTagType = (status) => {
  return status === '已完成' ? 'success' : status === '待批改' ? 'warning' : 'info'
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
</style>